<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-row>
      <a-col :span="24" style="width: 100%">
        <el-input
          style="width: 250px"
          placeholder="请输入教职工姓名"
          size="medium"
          v-model="teacherNameInput"
        />
        <el-select size="medium" v-model="schoolNameInput" filterable placeholder="请选择" style="margin-left:15px;width: 300px">
    <el-option
      v-for="item in schoolList"
      :key="item.value"
      :label="item.ORGNAME"
      :value="item.ORGCODE">
    </el-option>
  </el-select>
        <a-select
          default-value=""
          style="width: 200px; margin: 0 15px"
          @change="statusChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option
            :value="item.dictCode"
            v-for="(item, index) in statusInfo"
            :key="index"
            >{{ item.dictLabel }}</a-select-option
          >
        </a-select>
        <a-select
          default-value=""
          style="width: 200px; margin: 0 15px 0 0"
          @change="handleChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option
            :value="item.dictCode"
            v-for="(item, index) in allSubjects"
            :key="index"
            >{{ item.dictLabel }}</a-select-option
          >
        </a-select>
        <a-button type="primary" @click="search"> 搜索 </a-button>
        <a-button type="primary" style="margin-left: 15px" @click="addTeacher" v-if="isAdmin">
          添加教职工
        </a-button>
      </a-col>
      <a-col :span="24" style="width: 100%; margin: 10px 0"> </a-col>
    </a-row>
    <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      :visible="visible"
      :headerStyle="{ 'padding-top': '20px' }"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="600px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="教职工ID" prop="teacherId">
          <el-input v-model="ruleForm.teacherId" :disabled="addOrUpdate ? 1 : disabled"></el-input>
        </el-form-item>
        <el-form-item label="教职工名称" prop="teacherName">
          <el-input v-model="ruleForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicStatus">
          <el-select v-model="ruleForm.politicsStatus" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="(item, index) in dictionariesData"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictCode+''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="workingCondition">
          <el-select v-model="ruleForm.workingCondition" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="(item, index) in statusInfo"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictCode+''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校名称" prop="schoolName">
          <el-input v-model="schoolNameInfo"></el-input>
          <div v-show="showSelect" style="max-height: 300px; overflow-y: auto">
            <p
              v-for="(item, index) in selectSchoolName"
              :key="index"
              @click="selectSchool(item)"
              style="cursor: pointer"
              class="schoolName"
            >
              {{ item.ORGNAME }}
            </p>
          </div>
        </el-form-item>
        <el-form-item label="性别" prop="teacherSex">
          <el-select v-model="ruleForm.gender" placeholder="请选择教职工性别" style="width: 100%;">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-input v-model="ruleForm.country"></el-input>
        </el-form-item>
        <el-form-item label="户籍地" prop="placeOfDomicile">
          <el-input v-model="ruleForm.placeOfDomicile"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="teacherBirthday">
          <div class="block">
            <el-date-picker
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="任课名" prop="subjectCodes">
          <a-checkbox-group @change="onChange" :options="plainOptions" :default-value="defaultValue" v-model="ruleForm.subjectCodes">
            <!-- <a-row>
              <a-col
                :span="10"
                v-for="(item, index) in subjectType"
                :key="index"
              >
                <a-checkbox :value="item.dictCode">
                  {{ item.dictLabel }}
                </a-checkbox>
              </a-col>
            </a-row> -->
          </a-checkbox-group>
        </el-form-item>
        <el-form-item label="教师信息描述" prop="details">
          <el-input v-model="ruleForm.details"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="submitForm('ruleForm')"
            >提 交</el-button
          >
          <el-button @click="resetForm('ruleForm')" v-show="addOrUpdate==0">重置</el-button>
        </el-form-item>
      </el-form>
    </a-drawer>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :pagination="false"
      :data-source="teacherListInfo"
      bordered
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <span slot="cz" slot-scope="text, record">
        <a @click.stop="editTeacher(record)" style="color:#ff4d4f;">查看</a>
        <a @click.stop="removeTeacher(record)" style="padding-left:10px;color:#ff4d4f;" v-if="isAdmin">删除</a>
      </span>
      <span slot="sex" slot-scope="text, record">
        {{ record.gender == 1 ? "男" : "女" }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="actionUser(record.id)">编辑</a>
        <a-divider type="vertical" />
        <a @click="actionMenu(record.id)">删除</a>
      </span>
    </a-table>
    <a-pagination
      style="margin: 10px 0"
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="pageChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

  <script>
import teacher from "@/api/teacherManage";
const columns = [
  {
    title: "姓名",
    dataIndex: "teacher_name",
  },
  {
    title: "所在学校",
    dataIndex: "schoolName",
  },
  {
    title: "状态",
    dataIndex: "conditionName",
  },
  {
    title: "性别",
    scopedSlots: { customRender: "sex" },
  },
  {
    title: "课程名",
    dataIndex: "subjectName",
  },
  {
    title: "政治面貌",
    dataIndex: "politicsName",
  },
  {
    title: "ID号",
    dataIndex: "teacher_id",
  },
  {
    title: "操作",
    dataIndex: "cz",
    scopedSlots: { customRender: "cz" },
  },
];
import contacts from "@/api/organizations";
export default {
  data() {
    return {
      ruleForm: {
        teacherName: "",
        schoolCode: "",
        gender: "",
        teacherType: [],
        idCard: "",
        teacherId: "",
        birthday: "",
        idType: "",
        phone: "",
        politicsStatus: "",
        placeOfDomicile: "",
        country: "",
        details: "",
        subjectCodes: [],
        workingCondition:'',
      },
      rules: {
        teacherId: [
          { required: true, message: "请输入教职工ID", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        teacherName: [
          { required: true, message: "请输入教职工名称", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度必须大于两个字符",
            trigger: "blur",
          },
        ],
        schoolCode: [
          { required: true, message: "请选择学校", trigger: "blur" },
          {
            max: 100,
            trigger: "blur",
          },
        ],
      },
      visible: false,
      title: "",
      autoExpandParent: true,
      data: "",
      columns,
      selectedRowKeys: [],
      keyWord: "",
      teacherListInfo: [],
      total: 0,
      current: 1,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      pageSize: 10,
      pageNo: 1,
      schoolNameInput: "",
      schoolNameInfo: "",
      courseInfoList: [],
      subjectType: [],
      plainOptions:[],
      sexSelect: "",
      teacherNameInput: "",
      courseSelected: "",
      statusInfo: [],
      statusSelected: "",
      subjectName: "",
      teacherStatus: "",
      timer: null,
      showSelect: false,
      selectSchoolName: [],
      dictionariesData: [],
      addOrUpdate:0,
      schoolList:[],
      allSubjects:[],
      isAdmin:false
    };
  },
  mounted() {
    this.showSchool();
    this.getAllStatus();
    this.getTeacherInfo();
    this.getAllSubject();
    this.getRole();
    //this.getCourseInfo();
    //this.getStatusInfo();
  },
  watch: {
    schoolNameInfo() {
      if (this.schoolNameInfo != "" && this.schoolNameInfo != null) {
        this.fd(this.schoolNameInfo, 500);
        this.showSelect = true;
      } else {
        this.showSelect = false;
      }
    },
  },
  methods: {
    getRole() {
      contacts.getRoleByUser().then((res) => {
        // this.roleId = res.data.data.deptCodeRole[0].code;
        for (let i = 0; i < res.data.data.deptCodeRole.length; i++) {
          if (res.data.data.deptCodeRole[i].code == "t001") {
            this.isAdmin = true;
          }
        }
      });
    },
    showSchool(){
      contacts.getSchoolList().then((res)=>{
        this.schoolList = res.data.data.schools
      })
    },
    getAllSubject(){
      teacher.getSubjectType().then((res) => {
        this.allSubjects = res.data.data.dictionaries
      })
    },
    editTeacher(val){
      this.addOrUpdate = 1;
      this.subjectTypeInfo();
      this.getDictionariesPoliticsStatus();
      this.getAllStatus();
      this.title = "教职工详情";
      this.visible = true;
      this.ruleForm.teacherId = val.teacher_id
      this.ruleForm.teacherName = val.teacher_name
      this.ruleForm.phone = val.phone
      this.ruleForm.schoolCode = val.school_code
      this.ruleForm.politicsStatus= val.politics_status
      this.ruleForm.workingCondition = val.workingCondition
      this.ruleForm.gender = val.gender
      this.ruleForm.idCard = val.id_card
      this.ruleForm.country = val.country
      this.ruleForm.placeOfDomicile =val.place_of_domicile
      this.ruleForm.birthday = val.birthday
      this.ruleForm.subjectCodes=val.subject_code.split(",")
      this.ruleForm.workingCondition = val.working_condition
      this.schoolNameInfo = val.schoolName
    },
    getDictionariesPoliticsStatus() {
      teacher.getDictionariesPoliticsStatus().then((res) => {
        this.dictionariesData = res.data.data.dictionaries;
      });
    },
    removeTeacher(val) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        teacher.delTeacher(val.teacher_id).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getTeacherInfo();
          }
        });
      });
    },
    selectSchool(val) {
      this.showSelect = false;
      this.schoolNameInfo = val.ORGNAME;
      this.ruleForm.schoolCode = val.ORGCODE;
    },
    fd(fn, delay) {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        let data = {
          schoolName: fn,
        };
        contacts.getSchoolList(data).then((res) => {
          this.selectSchoolName = res.data.data.schools;
        });
      }, delay);
    },
    onChange(val) {
      this.ruleForm.subjectCodes = val;
    },
    async subjectTypeInfo() {
    this.plainOptions=[]
     await teacher.getSubjectType().then((res) => {
        for (let index = 0; index < res.data.data.dictionaries.length; index++) {
          this.plainOptions.push({label:res.data.data.dictionaries[index].dictLabel,value:res.data.data.dictionaries[index].dictCode+''});

        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.addOrUpdate ==0){
            teacher.addTeacher(this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.visible = false;
              this.getTeacherInfo();
            }else if(res.data.code==400){
              this.visible = false;
              this.$message.error("暂无权限");
            }else{
              this.visible = false;
              this.$message.error("系统错误，请联系管理员");
            }
          });
          }else{
              teacher.updateTeacher(this.ruleForm).then((res)=>{
              if (res.data.code == 200) {
              this.$message.success("修改成功");
              this.visible = false;
              this.getTeacherInfo();
            }
              })
            }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addTeacher() {
      this.addOrUpdate=0;
      this.getDictionariesPoliticsStatus();
      this.subjectTypeInfo();
      this.title = "添加教职工";
      this.visible = true;
    },
    getAllStatus() {
      teacher.getTeacherStatus().then((res) => {
        this.statusInfo = res.data.data.dictionaries;
      });
    },
    onClose() {
      this.visible = false;
      this.ruleForm.teacherId = ""
      this.ruleForm.teacherName =""
      this.ruleForm.phone = ""
      this.ruleForm.politicsStatus= ""
      this.ruleForm.workingCondition = ""
      this.ruleForm.gender = ""
      this.ruleForm.idCard = ""
      this.ruleForm.country = ""
      this.ruleForm.placeOfDomicile =""
      this.ruleForm.birthday = ""
      this.ruleForm.subjectCodes=[]
      this.ruleForm.workingCondition = ""
      this.schoolNameInfo =""
    },
    search() {
      this.getTeacherInfo();
    },
    handleChange(val) {
      this.courseSelected = val;
    },
    statusChange(val) {
      this.statusSelected = val;
    },
    getCourseInfo() {
      teacher.getAllCourse().then((res) => {
        this.courseInfoList = res.data.rows;
      });
    },
    getTeacherInfo() {
      let data = {
        page: this.current,
        size: this.pageSize,
        teacherName: this.teacherNameInput,
        schoolCode: this.schoolNameInput,
        workingCondition: this.statusSelected,
        subjectCode: this.courseSelected,
      };
      teacher.getTeacher(data).then((res) => {
        this.teacherListInfo = res.data.data.data;
        this.total = res.data.data.total;
      });
    },
    pageChange() {
      this.getTeacherInfo();
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getTeacherInfo();
    },
  },
};
</script>

  <style lang="less" scoped>
.schoolName:hover {
  background-color: rgb(246, 224, 224);
}
.ant-layout-header {
  background: #03212100 !important;
}

.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}
</style>
